<template>
	<div class="header">
    <div class="page-title">供货公司</div>
		<el-button type="text" @click="dialogVisible = true,handleAdd()">添加</el-button>
		<el-table :data="tableData" border style="width: 100%" row-key="row">
      <el-table-column prop="company_name" label="公司名称" width="200"></el-table-column>  ·
			<el-table-column prop="date_time" label="日期" width="160"></el-table-column>
			<el-table-column label="操作" width="100">
        <template #default="v">
          <el-button @click="handleEdit(v.row)" type="text" size="small">编辑</el-button>
          <el-button type="text" size="small" @click="handelDelete(v.row)">删除</el-button>
        </template>
			</el-table-column>
		</el-table>
    <el-pagination
      background
      hide-on-single-page
      layout="prev,page,next"
      :total="total"
      :current-page="current"
      @current-change="changePage"></el-pagination>

    <el-dialog title="供货公司" v-model="dialogFormadd" width="50%">
      <el-form>
        <el-form-item label="公司名称">
          <el-input v-model="form.company_name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
	</div>
</template>

<script>
import { request_company_index,request_company_add,request_company_edit,request_company_delete } from "@/network/api";
	export default {
		data() {
			return {
				dialogVisible: false,
        dialogFormadd:false,
        actionType:0,//1 添加 2 编辑
        current: 1,
        total: 0,
        form:{
          company_name:'',
        },
        tableData: []
			}
		},
    mounted() {
      this.init()
    },
    methods: {
      init() {
        this.$nextTick(() => {
          request_company_index()
              .then((res) => {
                const result = res.data;
                if (result.code == 200) {
                  this.tableData = result.data.data;
                  console.log(this.tableData);
                  this.total = result.data.total;
                  this.current = result.data.current;
                }
              })
              .catch();
        });
      },
      // 分页
      changePage(page) {
        request_company_index({
          page,
        })
            .then((res) => {
              const result = res.data;
              if (result.code == 200) {
                this.tableData = result.data.data;
                this.total = result.data.total;
                this.current = result.data.current;
              }
            })
            .catch();
      },
      handleEdit(row) {
        this.actionType = 2
        this.dialogFormadd=true
        this.form = row;
      },
      handleClose() {
        this.dialogFormadd=false
      },
      handleAdd(){
        this.dialogFormadd=true
        this.actionType = 1
      },
      handelDelete(row){
        console.log(row);
        this.$confirm('此操作将永久删除，是否继续?','系统提示',{
          type:'warning',
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
            .then(()=>{
          request_company_delete({
            id:row.id,
          }).then((res)=>{
            const result = res.data;
            if(result.code == 200){
              this.$message.success({
                message:"删除成功",
                offset:70
              });
              this.changePage(this.page)
            }else{
              this.$message.error({
                message: result.message,
                offset: 70,
              });
            }
          }).catch();
        }).catch(()=>{
          this.$message.info({
            message: "已取消删除！",
            offset: 70,
          });
        });
      },
      onSubmit(){
        if(this.form.company_name == ''){
          this.$message({
            message:'公司名称不允许为空!',
            type:'warning',
          })
          return false;
        }
        let apiFunc;
        switch (this.actionType){
          case 1: //添加
                apiFunc = request_company_add;
                break;
          case 2: //编辑
                apiFunc = request_company_edit;
                break;
          default:
              this.message.error({
                message:'操作类型不正确',
                offset:70,
              })
                return false;
        }
        apiFunc({
          ...this.form,
        }).then((res)=>{
            const result = res.data;
            if(result.code==200){
                this.dialogFormadd = false
                this.$message.success({
                  message: result.message,
                  type: 'success'
                })
              location.reload();
            }else{
              this.$message.error({
                message:result.message,
                type:'error'
              })
            }
        })
      }
    },
	}
</script>

<style>
</style>
